<template>
  <div :class="['go_login',show == true ? 'show':'']">
      <div class="lc">
          <a href="#/login">登录</a>
      </div>
        <div class="lr" @click="getShow">
            <img src="https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/cat5_c7004cd.png" alt="">
        </div>
  </div>
</template>

<script>
export default {
    name:"Go_login",
    data(){
        return{
            show:false,
            delay:null,
            count:5,
        }
    },
    watch:{
        show(val){
            if(val){
                if(this.delay){
                    this.count = 5
                    clearInterval(this.delay)
                }
                this.downTime()
            }else{
                clearInterval(this.delay)
                this.count = 5
                this.delay = null
                
            }
        }
    },
    methods:{
        getShow(){
            this.show = !this.show

        },

        downTime(){
            this.delay = setInterval(()=>{
                this.count--
                if(this.count <= 0){
                    this.show = false
                    clearInterval(this.delay)
                }
            },1000)
        }
    }
}
</script>

<style lang="scss" scoped>
.go_login{
    position: fixed;
    top:190px;
    left:0px;
    width: 90px;
    height: 45px;
    transform: translateX(-50%);
    display: flex;
    border-top-right-radius: 22.5px;
    border-bottom-right-radius: 22.5px;
    background-color: #24252b;
    z-index: 10000000;
    transition: all ease 0.3s;
    div{
        flex: 1;
    }
    .lc{ text-align: center;
        a{
             line-height: 45px;
           
            color: #4ca7f2;
            font-size: 14px;
        }
       
    }
    .lr{
        text-align: center;
        padding: 2px;
        img{
            width: 41px;
            height: 41px;
            border-radius: 50%;
            
        }
    }
}
.go_login.show{
    transform: translateX(0px);
}

</style>

